import type { Metadata } from 'next';
import Link from 'next/link';
import { IncidentSeriesChart } from '@/components/incidents/IncidentSeriesChart';
import { TYPE_LABEL } from '@/components/incidents/IncidentRow';
import { Bar, ConfBar, Section, Stat, StatusDot } from '@/components/ui/primitives';
import { apiGet, apiTry } from '@/lib/api';
import { fmt, fmtDuration, fmtInt, fmtRatio } from '@/lib/format';
import { pressureColor } from '@/lib/pressure';
import { Time } from '@/lib/time';
import type { IncidentDetail } from '@/lib/types';

export const dynamic = 'force-dynamic';

type Params = Promise<{ slug: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { slug } = await params;
  const i = await apiTry<IncidentDetail>(`/api/v1/incident/${encodeURIComponent(slug)}`);
  if (!i) return { title: 'Incident' };
  return { title: `${i.title} — ${i.status}, peak ${fmt(i.peak_pressure)}`, description: i.summary, alternates: { canonical: `/event/${i.slug}` }, openGraph: { type: 'article', publishedTime: i.started_at, modifiedTime: i.updated_at } };
}

function scopeHref(i: IncidentDetail): string | null {
  if (i.scope_type === 'region' && i.scope_id) return `/internet/${i.scope_id}`;
  if (i.scope_type === 'country' && i.scope_id) return `/country/${i.scope_id.toLowerCase()}`;
  if (i.scope_type === 'asn' && i.scope_id) return `/asn/${i.scope_id}`;
  if (i.scope_type === 'service' && i.scope_id) return `/service/${i.scope_id}`;
  return null;
}

export default async function EventPage({ params }: { params: Params }) {
  const { slug } = await params;
  const i = await apiGet<IncidentDetail>(`/api/v1/incident/${encodeURIComponent(slug)}`);
  const href = scopeHref(i);
  return (
    <article className="pb-8">
      <header className="grid gap-6 pt-6 pb-5 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">
        <div className="min-w-0">
          <p className="label flex flex-wrap items-center gap-3">
            <span>{TYPE_LABEL[i.type] ?? i.type}</span>
            <StatusDot status={i.status} />
            <span className="num normal-case tracking-normal text-ink-3">{i.event_id}</span>
          </p>
          <h1 className="mt-1 text-[26px] font-medium leading-tight tracking-tight sm:text-[32px]">{i.title}</h1>
          <p className="mt-2 max-w-[760px] text-[14px] text-ink-2">{i.summary}</p>
          <p className="num mt-3 flex flex-wrap gap-x-5 gap-y-1 text-[12px] text-ink-2">
            <span>
              scope{' '}
              {href ? (
                <Link href={href} className="text-ink hover:text-accent">
                  {i.scope_label}
                </Link>
              ) : (
                <span className="text-ink">{i.scope_label}</span>
              )}
            </span>
            <span>
              started <Time ts={i.started_at} className="text-ink" />
            </span>
            <span>
              {i.ended_at ? (
                <>
                  ended <Time ts={i.ended_at} className="text-ink" />
                </>
              ) : (
                <>
                  updated <Time ts={i.updated_at} className="text-ink" />
                </>
              )}
            </span>
            <span>
              duration <span className="text-ink">{fmtDuration(i.duration_s)}</span>
            </span>
          </p>
        </div>
        <div className="flex flex-wrap items-end gap-6">
          <div>
            <div className="label">current</div>
            <div className="num text-[56px] leading-none tracking-[-0.03em]" style={{ color: pressureColor(i.current_pressure) }}>
              {fmt(i.current_pressure)}
            </div>
          </div>
          <div>
            <div className="label">peak</div>
            <div className="num text-[28px] leading-none" style={{ color: pressureColor(i.peak_pressure) }}>
              {fmt(i.peak_pressure)}
            </div>
          </div>
          <div className="pb-1">
            <div className="label mb-1">confidence</div>
            <ConfBar value={i.confidence} />
          </div>
        </div>
      </header>

      <Section label="Series" right={<span>incident scope vs global pressure · from 30 min before detection</span>}>
        <IncidentSeriesChart series={i.series} timeline={i.timeline} />
      </Section>

      <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
        <Section label="Timeline" className="min-w-0">
          <ol className="relative ml-2 border-l border-line">
            {i.timeline.map((t, idx) => (
              <li key={idx} className="relative mb-4 pl-5 last:mb-0">
                <span className="absolute -left-[5px] top-1.5 size-2 rounded-full border border-bg" style={{ background: pressureColor(t.pressure) }} aria-hidden="true" />
                <div className="flex flex-wrap items-baseline gap-x-3">
                  <StatusDot status={t.status} />
                  <Time ts={t.ts} className="num text-[11.5px] text-ink-2" />
                  <span className="num text-[12px]" style={{ color: pressureColor(t.pressure) }}>
                    {fmt(t.pressure)}
                  </span>
                </div>
                <p className="mt-0.5 text-[12.5px] text-ink-2">{t.note}</p>
              </li>
            ))}
          </ol>
        </Section>
        <Section label="Hypotheses" right={<span>never overstated · confidence-weighted</span>} className="min-w-0">
          {i.hypotheses.length ? (
            <ul className="space-y-4">
              {i.hypotheses.map((h, idx) => (
                <li key={idx}>
                  <div className="flex items-baseline justify-between gap-4">
                    <p className="text-[14px] text-ink">{h.text}</p>
                    <span className="num shrink-0 text-[12px] text-ink-2">{Math.round(h.confidence * 100)} %</span>
                  </div>
                  <Bar value={h.confidence * 100} color="var(--accent)" className="mt-1.5" />
                  <ul className="mt-2 space-y-0.5 text-[12.5px] text-ink-2">
                    {h.evidence.map((e, k) => (
                      <li key={k}>· {e}</li>
                    ))}
                  </ul>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-[12.5px] text-ink-3">No causal hypothesis reached the minimum confidence.</p>
          )}
        </Section>
      </div>

      <Section label="Evidence" right={<span>signal · scope · current vs baseline · robust z</span>}>
        <div className="scroll-x -mx-3 px-3">
          <table className="tbl">
            <thead>
              <tr>
                <th>Signal</th>
                <th className="hidden sm:table-cell">Scope</th>
                <th className="r">Current</th>
                <th className="r">Baseline</th>
                <th className="r">z</th>
                <th className="r hidden sm:table-cell">Samples</th>
                <th className="r hidden md:table-cell">At</th>
              </tr>
            </thead>
            <tbody>
              {i.evidence.map((e, idx) => (
                <tr key={idx}>
                  <td>
                    <span className="text-ink">{e.label}</span> <span className="num text-[10.5px] text-ink-3">{e.signal_id}</span>
                  </td>
                  <td className="hidden text-ink-2 sm:table-cell">{e.scope_id ? `${e.scope_type}:${e.scope_id}` : e.scope_type}</td>
                  <td className="num r">{fmt(e.current, Math.abs(e.current) < 1 ? 3 : 1)}</td>
                  <td className="num r text-ink-2">{fmt(e.baseline, Math.abs(e.baseline) < 1 ? 3 : 1)}</td>
                  <td className="num r" style={{ color: Math.abs(e.robust_z) >= 3 ? 'var(--p-high)' : 'var(--ink)' }}>
                    {fmt(e.robust_z)}
                  </td>
                  <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(e.samples)}</td>
                  <td className="num r hidden text-ink-2 md:table-cell">
                    <Time ts={e.ts} style="time" />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {i.bgp && (
          <div className="mt-4 grid grid-cols-3 gap-4 sm:max-w-[480px]">
            <Stat label="BGP withdrawals" value={fmtRatio(i.bgp.withdrawals_ratio)} sub="vs baseline" />
            <Stat label="BGP announcements" value={fmtRatio(i.bgp.announcements_ratio)} sub="vs baseline" />
            <Stat label="origin changes" value={fmtInt(i.bgp.origin_changes)} />
          </div>
        )}
      </Section>

      <div className="grid grid-cols-[minmax(0,1fr)] gap-x-10 lg:grid-cols-2">
        <Section label={`Affected probes · ${fmtInt(i.affected_probes)}`} className="min-w-0">
          <ul className="divide-y divide-line text-[12.5px]">
            {i.probes.map((p) => (
              <li key={p.probe_id} className="flex flex-wrap gap-x-3 py-1.5">
                <span className="num w-24 text-ink">{p.probe_id}</span>
                <Link href={`/internet/${p.region}`} className="w-24 text-ink-2 hover:text-accent">
                  {p.region}
                </Link>
                <span className="flex-1 text-ink-2">{p.observation}</span>
              </li>
            ))}
          </ul>
        </Section>
        <Section label={`Affected targets · ${fmtInt(i.affected_targets)}`} className="min-w-0">
          <ul className="divide-y divide-line text-[12.5px]">
            {i.targets.map((t) => (
              <li key={t.target_id} className="flex flex-wrap gap-x-3 py-1.5">
                <Link href={`/service/${t.service_id}`} className="w-40 truncate text-ink hover:text-accent">
                  {t.name}
                </Link>
                <span className="flex-1 text-ink-2">{t.observation}</span>
              </li>
            ))}
          </ul>
          <div className="mt-3 flex flex-wrap gap-1.5">
            {i.affected_asns.map((a) => (
              <Link key={a} href={`/asn/${a}`} className="num rounded-[3px] border border-line px-1.5 py-0.5 text-[11px] text-ink hover:border-line-2">
                AS{a}
              </Link>
            ))}
            {i.affected_services.map((s) => (
              <Link key={s} href={`/service/${s}`} className="rounded-[3px] border border-line px-1.5 py-0.5 text-[11px] text-ink hover:border-line-2">
                {s}
              </Link>
            ))}
          </div>
        </Section>
      </div>

      <Section label="Annotations">
        {i.annotations.length ? (
          <ul className="divide-y divide-line text-[13px]">
            {i.annotations.map((a, idx) => (
              <li key={idx} className="py-2">
                <p className="text-ink">{a.text}</p>
                <p className="num mt-0.5 text-[11px] text-ink-3">
                  {a.author} · <Time ts={a.ts} />
                </p>
              </li>
            ))}
          </ul>
        ) : (
          <p className="text-[12.5px] text-ink-3">No human annotation yet.</p>
        )}
      </Section>
    </article>
  );
}